<template>
  <el-container class="layout-container-demo" :style="{height:mainPanelHeight+'px'}">
    <el-aside >
      <el-menu
          :default-active="activeMenu"
          mode="vertical"
          router
          >
        <el-menu-item index="/server">MQ服务地址</el-menu-item>
        <el-menu-item index="/topic" >消息主题</el-menu-item>
      </el-menu>
    </el-aside>
    <el-main >
      <router-view/>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "Setting",
  data(){
    return {
      mainPanelHeight:0,
      activeMenu: "/server"
    }
  },
  methods:{
    getHeight(){
      this.mainPanelHeight=window.innerHeight-65
    }
  },
  created(){
    window.addEventListener('resize', this.getHeight);
    this.getHeight()
  },
  mounted() {
    this.$router.replace({path: "/server"})
  }
}
</script>

<style scoped>
.layout-container-demo{
  border: 1px solid #eee
}
.layout-container-demo .el-aside {
  width: 180px;
  text-align: center;
  color: var(--el-text-color-primary);
  background: #fff !important;
  border-right: solid 1px #e6e6e6;
  box-sizing: border-box;
}
.layout-container-demo .el-main {
  padding: 0;
}

</style>